<!--
 *@description:
 *@author: Ming
 *@date: 2021-05-29 22:36:22
 *@version: V1.0.5
-->
<template>
  <div class="tabs" ref="tabs">
    <slot></slot>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name:'LmTabs',
  model: {
    prop: 'selected',
    event: 'selectedChange'
  },
  props: {
    selected:{
        type:String,
        required:true,
        default(){
            return null
        }
    },
    // 显示方向
    direction:{
        type:String,
        default: 'horizontal',
        validator(value){
            return ['horizontal','vertical'].indexOf(value)>=0
        }
    }
  },
  data() {
    return {
      eventBus:new Vue()
    };
  },
  // 向子元素提供事件中心
  provide(){
    return {
      eventBus: this.eventBus
    }
  },
  mounted() {
    let children =  this.$children
    if(children){
      children.forEach(vm=>{
        if(vm.$options.name ==="LmtabsHead"){
          vm.$children.forEach(item=>{
            if(item.name === this.selected){
              this.eventBus.$emit('update:selected', this.selected,item)
            }
          })
        }
      })
    }
    
  }
};
</script>

<style lang="scss" scoped>

</style>
